<template>
  <div class="message-box">
    <p>最新消息</p>
    <div class="message-box" v-for="item in newmessageList" :key="item.id">
      <div class="img-box">
        <img
          :src="item.avatar ? item.avatar : require('../../assets/image/avatar-default.png')"
          alt
        />
      </div>
      <div class="info-box">
        <div class="top-info">
          <div>{{item.userName}}</div>
          <div>{{item.createTime}}</div>
        </div>
        <div class="bottom-info">{{item.context}}</div>
      </div>
    </div>
    <p>两周前的消息</p>
    <div class="message-box" v-for="item in oldmessageList" :key="item.id">
      <div class="img-box">
        <img
          :src="item.avatar ? item.avatar : require('../../assets/image/avatar-default.png')"
          alt
        />
      </div>
      <div class="info-box">
        <div class="top-info">
          <div>{{item.userName}}</div>
          <div>{{item.createTime}}</div>
        </div>
        <div class="bottom-info">{{item.context}}</div>
      </div>
    </div>
    <p style="text-align:center; color:#ccc; font-size:12px">没有更多了</p>
  </div>
</template>

<script>
import { listInTwoWeeksMsg, listOutTwoWeeksMsg } from "@/api/Login";
import dateFormat from "utils/dateFormat";
export default {
  data() {
    return {
      newmessageList: [],
      oldmessageList: [],
    };
  },
  mounted() {
    listInTwoWeeksMsg().then(({ code, data, message }) => {
      if (!code) {
        data.forEach(
          (el) =>
            (el.createTime = dateFormat(new Date(el.createTime), "yyyy-MM-dd HH:mm:ss"))
        );
        this.newmessageList = data;
      } else {
        this.$toast(message);
      }
    });

    listOutTwoWeeksMsg().then(({ code, data, message }) => {
      if (!code) {
        data.forEach(
          (el) =>
            (el.createTime = dateFormat(new Date(el.createTime), "yyyy-MM-dd HH:mm:ss"))
        );
        this.oldmessageList = data;
      } else {
        this.$toast(message);
      }
    });
  },
};
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.message-box
  background #F5F5F5
  p
    padding rem(15) 0 rem(10) rem(15)
    font-size rem(14)
  .message-box
    background #FFFFFF
    display flex
    justify-content flex-start
    .img-box
      width rem(45)
      height rem(45)
      margin rem(20) 0 rem(15.5) rem(15)
      img
        width 100%
        height 100%
    .info-box
      padding rem(20) rem(15) rem(16.5) rem(10)
      display flex
      flex-direction column
      justify-content flex-start
      width 84%
      border-bottom rem(0.5) solid #E0E0E0
      .top-info
        display flex
        justify-content space-between
        font-size rem(12)
        color #999999
        :first-child
          font-size rem(15)
          color #333333
      .bottom-info
        margin-top rem(10.5)
        font-size rem(13)
        color #999999
</style>